<template>
  <el-aside :width="collapseWidth" id="Aside">
    <div class="controlCollapse" @click="changeCollapse">|||</div>
    <!-- default-opends:默认展开的一级菜单项 -->
    <!-- unique-opend:是否只展开一个一级菜单 -->
    <!-- collapse:改变侧边栏展开方式 -->
    <!-- collapse-transition:转变展开方式是否启用动画 -->
    <!-- router:以el-menu-item组件的index为路由跳转 -->
    <el-menu
      background-color="rgba(49, 55, 67, 1)"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-openeds="[defaultOpen]"
      :unique-opened="true"
      :collapse="isCollapse"
      :collapse-transition="false"
      :router="true"
      :default-active="isActive"
    >
      <!-- 一级导航栏 -->
      <el-menu-item :index="'/' + item.path" 
      v-for="item in asideListOne" :key="item.id"
      @click="asideActive(item.path, item.id)">
        <i :class="iconObj[item.id]"></i>
        <span slot="title">{{item.authName}}</span>
      </el-menu-item>

        <el-submenu :index="item.id + ''" v-for="item in asideListMore" :key="item.id">
          <template slot="title">
            <i :class="iconObj[item.id]"></i>
            <span>{{ item.authName }}</span>
          </template>

          <!-- 二级航栏组 -->
            <el-menu-item
            :index="'/' + i.path"
            v-for="i in item.children"
            :key="i.id"
            @click="asideActive(i.path, item.id)">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ i.authName }}</span>
            </template>
          </el-menu-item>
        </el-submenu>

    </el-menu>
  </el-aside>
</template>

<script>
// 交互

export default {
  name: 'Aside',
  data() {
    return {
      asideList: [], // 侧边栏数据
      iconObj: {
        // 字体图标对象
        '125': 'iconfont icon-yonghu',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-dingdan',
        '145': 'iconfont icon-faxian',
        '100': 'el-icon-location'
      },
      isCollapse: false, // 展开模式
      collapseWidth: '200px', // 侧边栏宽度
      defaultOpen: '', // 默认展开项
      isActive: ''
    }
  },
  created() {
    // 创建vm实例后执行
    this.getAsideList()

    // 刷新时读取sessionStorage的存储值
    const flag = window.sessionStorage.getItem('isActive')
    if (flag) {
      this.isActive = flag
    }

    // 浏览器控制按钮前进后退触发函数
    window.addEventListener('popstate', this.popstate, false)

    // 创建兄弟事件bus
    this.$bus.$on('dfActive', () => {
      // 访问到welecome组件时将默认选中、默认展开重置
      this.isActive = '/' + this.asideList[0].path;
      this.defaultOpen = '';
    })
  },
  destroyed() {
    // 销毁vm组件
    // 避免堆栈溢出，多次创建、多次触发
    window.removeEventListener('popstate', this.popstate, false)
  },
  methods: {
    async getAsideList() {
      // 获取侧边栏数据
      const data = `{
        "data": [
          {
            "id": 100,
            "authName": "首页",
            "path": "welcome",
            "children": [],
            "order": 0
          },
          {
            "id": 125,
            "authName": "用户管理",
            "path": "users",
            "children": [
              {
                "id": 110,
                "authName": "用户列表",
                "path": "users",
                "children": [],
                "order": null
              }
            ],
            "order": 1
          },
          {
            "id": 103,
            "authName": "权限管理",
            "path": "rights",
            "children": [
              {
                "id": 111,
                "authName": "角色列表",
                "path": "roles",
                "children": [],
                "order": null
              },
              {
                "id": 112,
                "authName": "权限列表",
                "path": "rights",
                "children": [],
                "order": null
              }
            ],
            "order": 2
          },
          {
            "id": 101,
            "authName": "商品管理",
            "path": "goods",
            "children": [
              {
                "id": 104,
                "authName": "商品列表",
                "path": "goods",
                "children": [],
                "order": 1
              }
            ],
            "order": 3
          },
          {
            "id": 102,
            "authName": "订单管理",
            "path": "orders",
            "children": [
              {
                "id": 107,
                "authName": "订单列表",
                "path": "orders",
                "children": [],
                "order": null
              }
            ],
            "order": 4
          },
          {
            "id": 145,
            "authName": "日志",
            "path": "reports",
            "children": [
              {
                "id": 146,
                "authName": "日志信息",
                "path": "reports",
                "children": [],
                "order": null
              }
            ],
            "order": 5
          }
        ]
        }`;
      this.asideList = JSON.parse(data).data;
    },
    // 改变侧边栏的展开方式  改变侧边栏宽度
    changeCollapse() {
      
      this.isCollapse = !this.isCollapse
      this.collapseWidth == '200px' ? (this.collapseWidth = '64px') : (this.collapseWidth = '200px')
    },
    // 侧边栏点击选中事件  将默认展开的default-openeds修改
    asideActive(activeName, defaultValue) {
      activeName = '/' + activeName;
      window.sessionStorage.setItem('isActive', activeName)
      this.isActive = activeName;
      this.defaultOpen = defaultValue.toString();
      // console.log(activeName, defaultValue);
    },
    // 浏览器前进后退触发函数
    popstate() {
      const name = this.$route.path;
      if (name === '/welcome') {
        // 特殊情况
        window.sessionStorage.setItem('isActive', '/welcom')
        this.isActive = '/welcome';
        this.defaultOpen = '';
        return;
      } else if (name === '/goods/add') {
        // 特殊情况
        window.sessionStorage.setItem('isActive', '/goods')
        this.isActive = '/goods';
        this.defaultOpen = '/goods';
        return;
      }

      // 非上面几种情况执行常规操作
      window.sessionStorage.setItem('isActive', name)
      this.isActive = name;

      // 结构  迭代  一级菜单导航
      const { id } = this.asideList.find(item => {
        return item.children.find(res => {
          return res.path == name.substr(1)
        })
      })
      if (!id) { return this.defaultOpen = ''; }
      this.defaultOpen = id.toString(); // 重新赋值默认打开一级菜单栏导航
      
    }
  },
  computed: {
    asideListMore() {
      const arr = [];
      for(let i of this.asideList) {
        // console.log(i);
        i.children.length > 0 ? arr.push(i) : '';
      }
      return arr;
    },
    asideListOne() {
      const arr = [];
      for(let i of this.asideList) {
        // console.log(i);
        i.children.length < 1 ? arr.push(i) : '';
      }
      return arr;
    }
  }
}
</script>

<style lang="scss" scoped>
#Aside {
  // 侧边栏
  background-color: rgba(49, 55, 67, 0.9);

  .el-menu-item:hover {
    // 二级导航栏鼠标悬停背景色
    background-color: $asideHoverBackgroundColor !important;
  }
}

.iconfont {
  // 字体图标
  margin-right: 8px;
}

.el-menu {
  // 清除侧边栏边框
  border: none;
}

.controlCollapse {
  // 折叠菜单样式
  background-color: rgba(71, 81, 99, 1);
  text-align: center;
  line-height: 100%;
  padding: 3px 0;
  letter-spacing: 4px;
  color: whitesmoke;
  opacity: 0.6;
  cursor: pointer;
}
</style>